<!DOCTYPE html >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>

    <!-- 开发环境版本，包含了有帮助的命令行警告 　引入VUE　JS-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<table width="90%" class="table" id="app">
    <button><a href="Init.jsp">返回</a></button>
    <caption>
        <h2>
            所有学生信息</h2>
    </caption>
    <thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            name
        </th>
        <th>
            Enrollment_Date
        </th>
        <th>
            number
        </th>
        <th>
            Semester
        </th>
        <th>
            status
        </th>
    </tr>
    </thead>
    <tr v-for="item in list">
        <td>
            {{item.StudentID}}
        </td>
        <td>
            {{item.StudentName}}
        </td>
        <td>
            {{item.StudentDate}}
        </td>
        <td>
            {{item.StudentNumber}}
        </td>
        <td>
            {{item.StudentSemester}}
        </td>
        <td>
            {{item.StudentStatus}}
        </td>
    </tr>

</table>
</body>




<script>

    var app = new Vue({
        el: '#app',


        created:function(){
            var that =this;
            axios.get("http://localhost:8080/AllServlet", {
            }).then(function (res) {
                var result = res.data;
                that.list=result;
                console.log(that.list)
            });
        },

        data: {
            list:[],
            msg:"yrst",
            student: {
                "StudentID": "19962938",
                "StudentName": "Jesson4",
                "Enrollment_Date":"19960901",
                "StudentNumber": "1510120969",
                "StudentSemester": "3",
                "StudentStatus": "L"
            },
        }

    })





</script>


</html>
